<template>
	<el-card>
		<el-row slot="header" type="flex" class="row-bg" justify="space-between">
			<span>按钮管理</span>
			<el-button v-permission="'system:operation:create'" icon="el-icon-circle-plus-outline" @click="openInsertDialog" type="primary" plain>添加按钮
			</el-button>
		</el-row>
		<el-table :data="opers" style="width: 100%">
			<el-table-column label="#" prop="operation_id" type="index">
			</el-table-column>
			<el-table-column prop="operation_name" label="操作名称">
			</el-table-column>
			<el-table-column prop="operation_code" label="操作代码">
			</el-table-column>
			<el-table-column prop="operation_description" label="操作描述">
			</el-table-column>
			<el-table-column label="操作" width="260">
				<template slot-scope="scope">
					<el-button v-permission="'system:operation:edit'" @click="openEditDialog(scope.row)" icon="el-icon-edit">编辑</el-button>
					<el-button v-permission="'system:operation:remove'" @click="handleRemove(scope.row.operation_id, scope.$index)" type="danger"
						icon="el-icon-delete">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 添加标签 -->
		<el-dialog title="添加" :visible.sync="insert_dialog_visible" @close="handleCloseDialog('insert_form')">
			<el-form :model="insert_form" :rules="rules" ref="insert_form" status-icon label-width="100px">
				<el-form-item label="操作名称" prop="operation_name">
					<el-input type="text" v-model="insert_form.operation_name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="操作代码" prop="operation_code">
					<el-input type="text" v-model="insert_form.operation_code" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="操作描述" prop="operation_description">
					<el-input type="text" v-model="insert_form.operation_description" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="insert_dialog_visible = false">取 消</el-button>
				<el-button type="primary" @click="handleInsert">添 加</el-button>
			</span>
		</el-dialog>
		<el-dialog title="修改" :visible.sync="edit_dialog_visible" @close="handleCloseDialog('edit_form')">
			<el-form :model="edit_form" :rules="rules" ref="edit_form" status-icon label-width="100px">
				<el-form-item label="操作名称" prop="operation_name">
					<el-input type="text" v-model="edit_form.operation_name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="操作代码" prop="operation_code">
					<el-input type="text" v-model="edit_form.operation_code" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="操作描述" prop="operation_description">
					<el-input type="text" v-model="edit_form.operation_description" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="edit_dialog_visible = false">取 消</el-button>
				<el-button type="primary" @click="handleEdit">保存</el-button>
			</span>
		</el-dialog>
	</el-card>
</template>

<script>
import { mapState, mapActions, mapGetters } from 'vuex';
export default {
	data() {
		return {
			insert_form: {
				operation_name: '',
				operation_code: '',
				operation_description: '',
			},
			insert_dialog_visible: false,
			edit_form: {
				operation_name: '',
				operation_code: '',
				operation_description: '',
			},
			edit_dialog_visible: false,
			current_oper: [],
			rules: {
				operation_name: [{
					required: true,
					message: '请输入链接标题',
					trigger: 'blur',
				},],
				operation_code: [{
					required: true,
					message: '请输入链接标题',
					trigger: 'blur',
				},],
				operation_description: [{
					required: true,
					message: '请输入链接标题',
					trigger: 'blur',
				},],
			},
		}
	},
	created() {
		this.load_oper_list({ pagesize: 30 });
	},
	computed: {
		...mapState('operation', ['opers']),
	},
	methods: {
		...mapActions('operation', ['load_oper_list', 'insert_oper', 'edit_oper', 'remove_oper']),
		openInsertDialog() {
			this.insert_dialog_visible = true;
		},
		async handleInsert() {
			this.$refs.insert_form.validate(async (valid) => {
				if (valid) {
					let { status, msg } = await this.insert_oper(this.insert_form);
					if (status) {
						this.insert_dialog_visible = false;
						this.$message.success(msg);
					}
				}
			});
		},
		openEditDialog(oper) {
			this.edit_dialog_visible = true;
			this.current_oper = oper;
			this.edit_form = { ...this.current_oper }
		},
		async handleEdit() {
			this.$refs.edit_form.validate(async (valid) => {
				if (valid) {
					let { status, msg } = await this.edit_oper({ ...this.edit_form })
					if (status) {
						Object.assign(this.current_oper, this.edit_form);
						this.$message.success(msg);
						this.edit_dialog_visible = false;
					}
				}
			});
		},
		handleCloseDialog(formName) {
			this.$refs[formName].resetFields();
		},
		handleRemove(operation_id, index) {
			this.$confirm('此操作将永久删除该标签, 是否继续?', '确认删除', { type: 'warning' })
				.then(async () => {
					let { status, msg } = await this.remove_oper({ operation_id, index })
					if (status) {
						this.edit_dialog_visible = false;
						this.$message.success(msg);
					}
				})


		}
	}
}
</script>